<template>
  <div class="myfs">
    <van-nav-bar
      class="page-navbar"
      title="关注"
      left-arrow
      @click-left="$router.back()"
    />

    <div class="list">
      <van-card
        :desc="item.content"
        v-for="(item,index) in comments"
        :key="index"
      >
        <template #thumb>
          <div>
            <van-icon
              class="aaas"
              :name="item.photo"
            />
          </div>
        </template>
        <template #title>
          <div class="aaa">粉丝数：{{item.fans_count}}
            <div class="aas">{{item.name}}</div>
          </div>
          <div class="aab">
            <van-button
              class="aac"
              type="default"
            >{{ item.mutual_follow ? '互相关注' : '已关注' }}</van-button>
          </div>
        </template>
        <template #price>
          {{item.add_time}}
        </template>
      </van-card>
    </div>
  </div>
</template>
<script>
import { upgs } from "../../../api/user"
export default {
  props: ['id'],
  data: () => ({
    comments: {}
  }),
  methods: {
    async upgs() {
      const res = await upgs()
      console.log(res)
      this.comments = res.data.data.results
      console.log(this.comments)
    }
  },
  created() {
    this.upgs()
  }
}
</script>
<style lang="less">
.myfs {
  .aaas {
    font-size: 50px;
  }
  .van-card__content {
    min-height: 50px;
  }
  .van-card__thumb {
    width: 15%;
    height: 50px;
    margin-right: 10px;
  }
  .van-card__desc {
    margin-top: 5px;
  }
  .van-card {
    width: 100%;
    height: 71px;
  }
  .aas {
    margin-top: 16px;
  }
  .aaa {
    float: left;
  }
  .aab {
    float: right;
  }
  .aac {
    background: rgba(219, 218, 218, 0.5);
    width: 80px;
    height: 40px;
    font-size: 12px;
  }
}
</style>